<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        title="黑名单列表"
        left-arrow
        right-text="新增"
        :fixed="true"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <van-search
      v-model="XXyz.mobile"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @clear="onCancel"
    />
    <van-pull-refresh
      class="pull-refresh_Search"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="list.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表内容 -->
        <div class="ulbox" v-if="list.length > 0">
          <div
            class="ul"
            v-for="(item, index) in list"
            :key="index"
            @click="HMDXQ(item)"
          >
            <div class="liXX">
              <div class="top_xx">
                <div class="title">
                  {{ item.userName }}
                </div>
                <div>
                  <van-icon
                    name="edit"
                    size="28"
                    color="#1989FA"
                    @click.stop="SetHMD(item)"
                  />
                  <van-icon
                    @click.stop="DelHMD(item)"
                    name="delete-o"
                    size="28"
                    color="#FD5332"
                    style="margin-left: 15px"
                  />
                </div>
              </div>

              <div class="lost_title">
                <div class="lost_title1">手机号</div>
                <div class="XX">：{{ item.mobile }}</div>
              </div>
              <div class="lost_title">
                <div class="lost_title1">已违规次数</div>
                <div class="XX">：{{ item.cumulativeCount }}次</div>
              </div>
              <div class="lost_title">
                <div class="lost_title1">违规次数上限</div>
                <div class="XX">：{{ item.totalCount }}次</div>
              </div>
              <div class="lost_title">
                <div class="lost_title1">更新时间</div>
                <div class="XX">：{{ item.creationTime }}</div>
              </div>
              <van-divider
                :style="{
                  borderColor: '#999',
                  margin: '10px 0',
                }"
              />
              <div
                class="XX GXSJ"
                style="text-align: right"
                @click.stop="BD(item)"
              >
                <van-button type="primary" size="normal">绑定订单</van-button>
                <!-- 更新时间：{{ item.creationTime }} -->
              </div>
            </div>
          </div>
        </div>
        <!-- 自定义错误提示（可选增强样式） -->
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
    <van-dialog
      v-model:show="show"
      :title="title"
      show-cancel-button
      :showConfirmButton="false"
      :close-on-click-overlay="true"
      :showCancelButton="false"
      @close="DELxx"
    >
      <van-form @submit="onSubmit" label-width="80px">
        <van-cell-group inset>
          <van-field
            v-model="Setobj.userName"
            name="姓名"
            label="姓名"
            :disabled="title != '修改黑名单' ? false : true"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="Setobj.mobile"
            :disabled="title != '修改黑名单' ? false : true"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field name="stepper" label="上限次数">
            <template #input>
              <van-stepper v-model="Setobj.totalCount" step="1" />
            </template>
          </van-field>
          <van-field name="stepper" label="违规次数">
            <template #input>
              <van-stepper
                disabled
                :max="Setobj.totalCount"
                v-model="Setobj.cumulativeCount"
                min="0"
                step="1"
              />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import {
  queryMealBlacklistList,
  updateMealBlacklist,
  deleteMealBlacklist,
} from "@/api/realAssets/icsharedstation/CPXX/index.js";
import { getmoreRoute } from "../../../../../common/moreRouteList";
import { Dialog, Notify } from "vant";
export default {
  data() {
    return {
      siteData: JSON.parse(localStorage.getItem("siteData")),
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false, // 控制错误状态
      title: "新增黑名单",
      show: false,
      XXyz: {
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        postId: JSON.parse(localStorage.getItem("siteData")).postId,
        mobile: "",
        pageNumber: 1,
        pageSize: 10,
      },
      Setobj: {
        id: 0,
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        cumulativeCount: 0,
        totalCount: 1,
        userName: "",
        mobile: "",
      },
    };
  },
  created() {},
  mounted() {
    this.onLoad();
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      //   list.value = [];
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },

    // 点击重试
    retryLoad() {
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      queryMealBlacklistList(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          this.list = [...this.list, ...res.data];
          // list.value = res.data;
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
    //清空搜索
    onCancel() {
      this.onRefresh();
    },
    //按键触发
    onSearch() {
      this.onRefresh();
    },
    onSubmit() {
      if (this.title == "新增黑名单") {
        updateMealBlacklist(this.Setobj).then((res) => {
          if (res.resultCode == 1) {
            Notify({ type: "success", message: res.data });
            this.onRefresh();
          } else {
            Notify({ type: "warning", message: "新增失败" });
          }
        });
      } else {
        updateMealBlacklist(this.Setobj).then((res) => {
          if (res.resultCode == 1) {
            Notify({ type: "success", message: res.data });
            this.onRefresh();
          } else {
            Notify({ type: "warning", message: "修改失败" });
          }
        });
      }
      this.show = false;
    },
    //点击新增
    onClickRight() {
      this.title = "新增黑名单";
      this.show = true;
    },
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_indexbrn",
      });
    },
    //设置黑名单
    SetHMD(val) {
      this.title = "修改黑名单";
      this.show = true;
      this.Setobj.id = val.id;
      // Setobj.siteId =val.id;
      this.Setobj.cumulativeCount = val.cumulativeCount;
      this.Setobj.totalCount = val.totalCount;
      this.Setobj.userName = val.userName;
      this.Setobj.mobile = val.mobile;
    },
    //数据清空
    DELxx() {
      this.Setobj.id = 0;
      this.Setobj.siteId = this.siteData.id;
      this.Setobj.cumulativeCount = 0;
      this.Setobj.totalCount = 1;
      this.Setobj.userName = "";
      this.Setobj.mobile = "";
    },
    //删除黑名单
    DelHMD(val) {
      Dialog.confirm({
        title: "删除操作",
        message: `是否解除该用户【${val.userName}】黑名单限制？`,
      })
        .then(() => {
          // on confirm
          deleteMealBlacklist({ id: val.id }).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              this.onRefresh();
            } else {
              Notify({ type: "warning", message: "删除失败" });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //跳转到详情
    HMDXQ(val) {
      let li = encodeURIComponent(JSON.stringify(val.serviceOrderList));
      this.$router.push({
        name: "i_life_ZGST_HMD_HMDXQ",
        query: {
          XX: val.siteId,
          list: li,
          id: val.id,
        },
      });
    },
    //跳转到订单列表
    BD(val) {
      //获取订单id作为回显
      let XXlist = [];
      if (val.serviceOrderList.length > 0) {
        val.serviceOrderList.forEach((item) => {
          XXlist.push(item.id);
        });
      }
      let li = encodeURIComponent(JSON.stringify(XXlist));
      this.$router.push({
        name: "i_life_ZGST_HMD_DDLB",
        query: {
          XX: val.siteId,
          list: li,
          id: val.id,
        },
      });
    },
  },
};
</script>
<style >
.van-stepper__input {
  width: 100px;
}
</style>
<style lang="less" scoped>
@import "../../../../../static/css/index.less";
@import "../../../../../static/css/GYcSS.less";
.liXX {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
}
.title {
  font-size: 18px !important;
  display: flex;
  color: rgb(0, 186, 173);
  align-items: center;
  // margin-bottom: 10px;
  letter-spacing: 2px;
  margin: 0 !important;
}
.lost_title {
  color: rgb(56, 56, 56);
  display: flex !important;
  flex-direction: row;
  // align-content: center;
  align-items: center;
  font-size: 13px;
  line-height: 25px;

  .lost_title1 {
    width: 100px;
    text-align-last: justify;
    // margin-left: 5px;
  }
}
.XX {
  color: rgb(56, 56, 56);
  font-size: 13px;
}
.top_xx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.GXSJ {
  font-size: 12px;
}
</style>